<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col  :sm="24" :md="12" :xxl="6" :xl="12" :style="{ marginBottom: '20px' }" >
        <div class="top_inner blue">
          <div class="tit_con tit_flex">
            <div class="tit_left">
              <img src="@/assets/chart/icon_jgzsl.png" alt="">
              <div>
                <p class="num">{{orderNum}}</p>
                <p class="sm_tit">楼宇数</p>
              </div>
            </div>
           <!-- <div class="sel_con">
              <j-dict-select-tag  v-model="nowSale" placeholder="请选择日期" dict-code="date_type" />
            </div>-->
          </div>
        </div>
      </a-col>
      <a-col  :sm="24" :md="12" :xxl="6" :xl="12" :style="{ marginBottom: '20px' }">
        <div class="top_inner light_blue">
          <div class="tit_con tit_flex" >
            <div class="tit_left" >
              <img src="@/assets/chart/icon_fzjgzsl.png" alt="">
              <div>
                <p class="num">{{saleNum}}</p>
                <p class="sm_tit">楼栋数</p>
              </div>
            </div>
            <!--<div class="sel_con">
              <j-dict-select-tag  v-model="nowSale" placeholder="请选择日期" dict-code="date_type" />
            </div>-->
          </div>
        </div>
      </a-col>
      <a-col  :sm="24" :md="12" :xxl="6" :xl="12" :style="{ marginBottom: '20px' }">
        <div class="top_inner yellow">
          <div class="tit_con tit_flex">
            <div class="tit_left" >
              <img src="@/assets/chart/icon_cyrezsl.png" alt="">
              <div>
                <p class="num">{{addUserNum}}</p>
                <p class="sm_tit">房源数</p>
              </div>
            </div>
            <!--<div class="sel_con">
              <j-dict-select-tag  v-model="addUsers" placeholder="请选择日期" dict-code="date_type" />
            </div>-->
          </div>
        </div>
      </a-col>
      <a-col  :sm="24" :md="12" :xxl="6" :xl="12" :style="{ marginBottom: '20px' }">
        <div class="top_inner green">
          <div class="tit_con tit_flex" >
              <div class="tit_left" >
                <img src="@/assets/chart/icon_bazsl.png" alt="">
                <div>
                  <p class="num">{{kucunYjNum}}</p>
                  <p class="sm_tit">政策中心发布数</p>
               </div>
            </div>
            <!--<div class="sel_con">
              <j-dict-select-tag  v-model="kucunYj" placeholder="请选择日期" dictCode="date_type"/>
            </div>-->
          </div>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col  :sm="24" :md="24" :xxl="16" :xl="24">
        <div class="middle_inner middle_box">
          <div class="tit_con tit_flex">
            <p>房源访问量</p>
            <div class="">
              <div class="sel_con" style="width: 150px;">
                <j-dict-select-tag  v-model="orderDate" placeholder="请选择日期" dictCode="date_type" style="width: 100%"/>
              </div>
            </div>
          </div>
          <div class="middle_bar" id="yw"></div>
        </div>
      </a-col>
      <a-col  :sm="24" :md="24" :xxl="8" :xl="24">
        <div class="middle_inner_sm middle_box">
          <div class="tit_con tit_flex">
            <p>访问量<span>占比</span></p>
            <div class="tit_flex">
              <div class="sel_con" style="width: 150px;">
                <j-dict-select-tag  v-model="saleZb" placeholder="请选择日期" dictCode="date_type" style="width: 100%"/>
              </div>
            </div>
          </div>
          <div class="middle_bar_sm" id="jh_sm"></div>
        </div>
      </a-col>
    </a-row>
   <!-- <a-row :gutter="24">
      <a-col  :sm="24" :md="24" :xxl="12" :xl="24">
        <div class="bottom_inner">
          <div class="tit_con tit_flex">
            <p>xxx<span style="margin-left: 10px;font-size: 20px;font-weight: 700;color: #0A7BFF;">啊实打实</span></p>
            <div class="m_flex_box flex_vc">
              <div class="sel_con">
                <j-dict-select-tag  style="width: 146px" v-model="search1" placeholder="请选择日期" dictCode="date_type"/>
              </div>
            </div>
          </div>
          <div class="middle_bar_sm" id="ywts"></div>
        </div>
      </a-col>
      <a-col  :sm="24" :md="24" :xxl="12" :xl="24">
        <div class="bottom_inner">
          <div class="tit_con tit_flex" style="margin-bottom: 0">
            <p>xxx</p>
            <div class="m_flex_box flex_vc">
              <div class="sel_con">
                <j-dict-select-tag  style="width: 146px" v-model="search2" placeholder="请选择日期" dictCode="date_type"/>
              </div>
            </div>
          </div>
          <div class="three_con m_flex_box">
            <div class="inner" id="three1"></div>
            <div class="inner" id="three2"></div>
            <div class="inner" id="three3"></div>
          </div>
        </div>
      </a-col>
    </a-row>-->
  </div>
</template>

<script>
  import store from '@/store/'
  import * as echarts from 'echarts';
  import ACol from "ant-design-vue/es/grid/Col"
  import { httpAction, getAction } from '@/api/manage'
  import { USER_AUTH,SYS_BUTTON_AUTH } from "@/store/mutation-types"

  export default {
    name: "IndexChart",
    components: {
      ACol,
    },
    data() {
      return {
        titles:'今日',
        orderNum:0,//待处理订单数
        nowSale:'4',//今日销售额查询条件
        saleNum:0,//今日销售额
        addUsers:'4',//今日新增用户查询条件
        addUserNum:0,//今日新增用户数
        kucunYj:null,//库存预警查询条件
        kucunYjNum:0,//库存预警数
        orderDate:'4',//销售额/订单/访问量查询条件
        saleZb:'4',//类型占比查询条件
        url:{
          getSigleNum:'/home/getSigleNum',
          getSale:'/home/getSale',
          getUser:'/home/getUser',
          gettj1:'/home/gettj1',
          getTypeTj:'/home/getTypeTj',
        },
      }
    },
    created() {
    },
    watch:{
      //新闻点击量
      ['orderDate'](n){
        if(!this.orderDate){
          this.orderDate = "4";
        }
        //新闻点击量
        this.getData(this.url.gettj1, {dateType:this.orderDate}).then(res => {
          this.initMiddleBar('yw', res.dateList,res.orderList,res.saleList,res.vistList);
        })
      },
      //监听类型占比查询条件
      ['saleZb'](n){
        if(!this.saleZb){
          this.saleZb = "4";
        }
        this.getData(this.url.getTypeTj, {dateType:this.saleZb}).then(res => {
           this.initSmBar('jh_sm', '#00479D', res,"","", '用户信息交互');
        })
      },
    },


    mounted() {
      if(!this.orderDate){
        this.orderDate = "4";
      }
      if(!this.saleZb){
        this.saleZb = "4";
      }
        //查询固定值
        this.getData(this.url.getSigleNum, {}).then(res => {
            this.orderNum = res.orderNum;
            this.saleNum = res.saleNum;
            this.addUserNum = res.addUserNum;
            this.kucunYjNum = res.kucunYjNum;
        })
       //新闻点击量
        this.getData(this.url.gettj1, {dateType:this.orderDate}).then(res => {
          this.initMiddleBar('yw', res.dateList,res.orderList,res.saleList,res.vistList);
        })
      //商品类别占比
        this.getData(this.url.getTypeTj, {dateType:this.saleZb}).then(res => {
          this.initSmBar('jh_sm', '#00479D', res,"","", '用户信息交互');
        })
    },

    methods: {
      getData(url, query){
        return new Promise(resolve => {
          getAction(url, query).then(res=>{
            if (res.success) {
              resolve(res.result)
            }else{
              console.log(res.message)
            }
          })
        })
      },

      initLine(id, color, x,y, rotate=0 ) {
        if(!document.getElementById(id)) {
          return
        }
        var myChart = echarts.init(document.getElementById(id));
        myChart.setOption({
          xAxis: {
            data: x,
            axisLabel: {
              color: '#666666',
              fontSize: 11,
              interval: 0,
              rotate
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
          },
          grid:{
            x:50,
            y:25,
            x2: 20,
            y2: 30
          },
          yAxis: {
            minInterval: 1,
            axisLine: {
              show: false
            },
            splitNumber: 4,
            axisTick: {
            },
            axisLabel: {
              color: '#666666',
            }
          },
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          series: [
            {
              type: 'line',
              itemStyle: {
                color: color,
              },
              label: {
                show: true,
                valueAnimation: true,
                color: '#666666'
              },
              data: y
            }
          ]
        });
      },
      initMiddleBar(id, x,y,z,k) {
        if(!document.getElementById(id)) {
          return
        }
        var myChart = echarts.init(document.getElementById(id));
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['房源', '政策中心', '平台动态']
          },
          xAxis: [
            {
              type: 'category',
              data: x,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '房源',
              min: 0,
              max: 1000,
              interval: 200,
              axisLabel: {
                formatter: '{value} '
              }
            },
            {
              type: 'value',
              name: '政策中心',
              min: 0,
              max: 1000,
              interval: 200,
              axisLabel: {
                formatter: '{value} '
              }
            },
            /*{
              type: 'value',
              name: '访问量',
              min: 0,
              max: 100,
              interval: 100,
              axisLabel: {
                formatter: '{value} '
              }
            }*/
          ],
          series: [
            {
              name: '房源',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + '';
                }
              },
              data: y
            },
            {
              name: '政策中心',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + '';
                }
              },
              data: z
            },
            {
              name: '平台动态',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + '';
                }
              },
              data: k
            }
          ]
        });
      },

      initSmBar(id, color, x,y,z, tit) {
        if(!document.getElementById(id)) {
          return
        }
        var myChart = echarts.init(document.getElementById(id));
        myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '访问量占比',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: x
            }
          ]
        });
      },
      initPie1(id,data,title) {
        if(!document.getElementById(id)) {
          return
        }
        var myChart = echarts.init(document.getElementById(id));
        myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
              ]
            }
          ]
        })
      },
      initPieSm(id, data, title) {
        if(!document.getElementById(id)) {
          return
        }
        var myChart = echarts.init(document.getElementById(id));
        myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
              ]
            }
          ]
        })
      },

    }
  }
</script>

<style lang="less" scoped>
  .page-header-index-wide{
    height: 100%;
    width: 100%;
  }
  .tit_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    .tit_left{
      display: flex!important;
      align-items: center;
    }
  }
  p{
    margin-bottom: 0;
  }
  .top_inner{
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px 10px;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    max-height: 85px;
    img{
      margin-right: 14px;
    }
    .num{
      font-size: 20px;
      font-weight: 700;
    }
    .sm_tit{
      font-size: 16px;
    }
    &.blue{
      background-image: url('../../assets/chart/bg_jgzsl.png');
      .num{
        color: #0A7BFF;
      }
    }
    &.light_blue{
      background-image: url('../../assets/chart/bg_fzjg.png');
      .num{
        color: #43ADD0;
      }
      .sm_title{
        font-size: 12px;
      }
      .sm_num{
        color: #43ADD0;
        font-size: 16px;
        font-weight: 600;
      }
      .inner{
        line-height: 16px;
      }
    }
    &.yellow{
      .num{
        color: #FDA45C;
      }
    }
    &.green{
      .num{
        color: #43D0B5;
      }
    }
    .sel_con{
      margin-right: 1px;
      width: 150px;
    }
  }
  #pro_num{
    margin-top: 10px;
  }
  .sel_con{
    .ant-select{
      width: 100%;
      /deep/
      .ant-select-selection{
        border-color: #0A7BFF;
        height: 38px;
        .ant-select-selection__rendered{
          line-height: 36px;
        }
        .ant-select-selection__placeholder{
          color: #0A7BFF;
        }
        .ant-select-arrow{
          color: #0A7BFF;
        }
        .ant-select-selection-selected-value{
          color: #0A7BFF;
        }
      }
    }
    &.dark{
      /deep/
      .ant-select-selection{
        border-color: #0A7BFF;
        background-color: #0A7BFF;
        height: 38px;
        .ant-select-selection__rendered{
          line-height: 36px;
        }
        .ant-select-selection__placeholder{
          color: #fff;
        }
        .ant-select-arrow{
          color: #fff;
        }
        .ant-select-selection-selected-value{
          color: #fff;
        }
      }
    }
  }
  .bg_blue{
    /deep/
    .ant-select-selection{
      border-color: #0A7BFF;
      background-color: #0A7BFF;
      height: 38px;
      .ant-select-selection__rendered{
        line-height: 36px;
      }
      .ant-select-selection__placeholder{
        color: #fff!important;
      }
      .ant-select-arrow{
        color: #fff!important;
      }
      .ant-select-selection-selected-value{
        color: #fff!important;
      }
    }
  }
  /deep/
  #jg_num{
    height: 120px;
    >div{
      width: 100%!important;
    }
    canvas{
      width: 100%!important;
    }
  }
  /deep/
  #person_num{
    height: 120px;
    >div{
      width: 100%!important;
    }
    canvas{
      width: 100%!important;
    }
  }
  .float-div {
  }
  /deep/
  /*#record_num{*/
  /*  height: 120px;*/
  /*  >div{*/
  /*    width: 100%!important;*/
  /*  }*/
  /*  canvas{*/
  /*    width: 100%!important;*/
  /*  }*/
  /*}*/
  .middle_box{
    background-color: #fff;
    padding: 10px 10px 0;
    box-sizing: border-box;
    height: 100%;
  }
  // 第二行
  .middle_inner{
    .sel_con{
      margin-left: 10px;
    }
    .tit_con{
      font-size: 18px;
      span{
        color: #0A7BFF;
      }
    }
  }
  .middle_inner_sm{
    .sel_con{
      margin-left: 10px;
    }
    .tit_con{
      font-size: 18px;
      span{
        color: #0A7BFF;
      }
    }
  }
  /deep/
  .tips_con {
    h4{
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 10px;
    }
    p{
      margin-bottom: 0;
    }
    .inner{
      padding: 0 14px;
      margin-bottom: 10px;
      position: relative;
      span{
        position: absolute;
        top: 6px;
        width: 8px;
        height: 8px;
        left: 0;
        border-radius: 50%;
      }
    }
  }
  /deep/
  .middle_bar{
    height: 550px;
    >div:first-child{
      width: 100%!important;
    }
    canvas{
      width: 100%!important;
    }
  }
  /deep/
  .middle_bar_sm{
    height: 550px;
    >div:first-child{
      width: 100%!important;
    }
    canvas{
      width: 100%!important;
    }
  }


  // 第三行
  .bottom_inner{
    background-color: #fff;
    padding: 10px 10px 0;
    box-sizing: border-box;
    height: 230px;
    .tit_con{
      margin-bottom: 10px;
      font-size: 18px;
      span{
        color: #0A7BFF;
      }
    }
  }
  #ywts{
    height: 200px;
  }
  .pie_con{
    height: 160px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    .text_con{
      margin-left: 14px;
      p{
        margin-bottom: 0;
      }
      h4{
        font-size: 20px;
        margin-bottom: 0;
        font-weight: 700;
      }
      .blue{
        color: #0A7BFF;
      }
      .light_blue{
        color: #43ADD0;
      }
      .green{
        color: #43D0B5;
      }
      .yellow{
        color: #FDA45C;
      }
    }
  }
  .three_con{
    width: 100%;
    .inner{
      width: calc(100% / 3);
      height: 160px;
      >div:first-child{
        width: 100%!important;
      }
      canvas{
        width: 100%!important;
      }
    }
  }
</style>